// 这里写组合式函数：

import { findOrganizationsApi, findServicePacksApi, searchDoctorsApi } from "@/api/doctors";
import { findPermissionApi } from "@/api/permission";
import { detailservicePacksApi } from "@/api/servicepack";
import { getTeamDetailApi, searchTeam } from "@/api/team";
// import { ElMessageBox } from "element-plus";
import { reactive, ref, h } from "vue";

export function useFindData() {
  const permissionData = reactive<{ rows: any[], total: number }>({ rows: [], total: 0 });
  const doctorTeamsData = reactive<{ rows: any[], total: number }>({ rows: [], total: 0 });
  const organizationsData = reactive<{ rows: any[], total: number }>({ rows: [], total: 0 });
  const servicePacksData = reactive<{ rows: any[], total: number }>({ rows: [], total: 0 });
  const doctorsData = reactive<{ rows: any[], total: number }>({ rows: [], total: 0 });
  const servicePacksDetailData = reactive<{ serviceItemIds: any[], rows: any[], total: number }>({ serviceItemIds: [], rows: [], total: 0 });
  const teamDetail = reactive<{ servicePackIds: any[], rows: any[], total: number }>({ servicePackIds: [], rows: [], total: 0 });

  // 签约状态 数据
  const signStatesData = [
    { label: '已驳回', value: '0', color: '#FA7674' },
    { label: '待审核', value: '1', color: '#3DD4A7' },
    { label: '待支付', value: '2', color: '#FBE178' },
    { label: '生效中', value: '3', color: '#6C76F4' },
    { label: '已过期', value: '4', color: '#999999' }
  ];

  // 团队详情
  const teamMsg = ref({
    // _id:'',
    // name:'',
    // avatar:'',   
    tagIds: [],
    organizationId: {},
    memberIds: []
  })

  // xiaomu：开启 删除确认 消息弹窗 的 方法
  const open = async (tip = '删除后无法恢复，确定要删除此条角色吗?') => {
    try {
      await ElMessageBox.confirm(
        tip,
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
      );
      // 如果用户点击确认，返回true
      return true;

    } catch (error) {
      // 用户点击取消或关闭弹窗时，会进入 catch，发挥false
      return false; // 返回 false 表示未确认
    }
  };

  // xiaomu：开启 带文本域<textarea></textarea>的 删除确认 消息弹窗 的 方法
  const openPrompt = async (tip: string, title: string) => {
    // 保存用户输入的值
    let value = '';
    try {
      await ElMessageBox.confirm(
        tip,
        title,
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          message: h('div', null, [
            h('span', null, '驳回原因：'),
            h('textarea', {
              placeholder: "请输入驳回原因",
              style: 'border: 1px solid #ddd; border-radius: 5px; resize: none; vertical-align: top; height: 100px; padding: 5px;',
              onInput: (e: any) => {
                value = e.target.value
              }
            })
          ]),
          dangerouslyUseHTMLString: true
        }
      );

      // 如果用户点击确认，返回输入框内容
      return value;

    } catch (error) {
      // 用户点击取消或关闭弹窗时，会进入 catch，返回 false 表示未确认
      return false;
    }
  };

  /** 
   * 说明：
   * 详细解释在笔记 Vue3小知识点 中
   * message: h('div', null, [
      h('p', null, '请输入内容:'),
      h('input', {
        type: 'text',
        style: 'width: 100%; margin-top: 10px; padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px;',
        onInput: (e) => {
          this.inputValue = e.target.value
        }
      })
    ])
   * 相当于：
   * <div>
      <p>请输入内容:</p>
      <input 
        type="text" 
        style="width: 100%; margin-top: 10px; padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px;"
        @input="(e) => { this.inputValue = e.target.value }"
      />
    </div>
   * 参数说明：
      h() 函数通常接收三个参数：
        元素/组件：HTML 标签名或 Vue 组件
        属性对象：元素的属性、样式、事件等
        子节点：可以是文本字符串或其他 h() 创建的 VNode
  */

  // xiaomu：发请求：获取 权限 数据
  function findPermissionAsync(data?: object) {
    findPermissionApi(data)
      .then(res => {
        if (res.code == 200) {
          permissionData.rows = res.data.rows;
          permissionData.total = res.data.total;
        }
      })
  }

  // 获取团队详情
  async function accTeamDetail(uid: any) {
    const res = await getTeamDetailApi({
      _id: uid,
      // doctorId: '656f1517aa8386d1a3f2cf77',
      // type: 2
    })
    if (res.code == 200) {
      teamMsg.value = res.data;
    }
  }

  // xiaomu：请求：获取 医生团队 数据
  const searchDoctorTeams = async (data?: any) => {
    const res = await searchTeam(data);
    if (res.code == 200) {
      doctorTeamsData.rows = res.data.rows;
      doctorTeamsData.total = res.data.total;
    }
  }

  // xiaomu：请求：获取 机构 数据
  const findOrganization = async (data?: any) => {
    const res = await findOrganizationsApi(data);
    if (res.code == 200) {
      organizationsData.rows = res.data.rows;
      organizationsData.total = res.data.total;
    }
  }

  // xiaomu：请求：获取 服务包 数据
  const findServicePacks = async (data?: any) => {
    const res = await findServicePacksApi(data);
    if (res.code == 200) {
      servicePacksData.rows = res.data.rows;
      servicePacksData.total = res.data.total;
    }
  }
  // xiaomu：请求：获取 医生 数据
  const searchDoctors = async (data?: any) => {
    const res = await searchDoctorsApi(data);
    if (res.code == 200) {
      doctorsData.rows = res.data.rows;
      doctorsData.total = res.data.total;
    }
  }

  // xiaomu：获取 一个医生团队 详情
  async function findTeamDetail(data: any) {
    const res = await getTeamDetailApi(data)
    if (res.code == 200) {
      teamDetail.servicePackIds = res.data.servicePackIds;
    }
  }

  // xiaomu：获取 一个服务包 详情
  async function findServicePacksDetail(data: any) {
    const res = await detailservicePacksApi(data);
    if (res.code == 200) {
      servicePacksDetailData.serviceItemIds = res.data.serviceItemIds;
    }
  }

  return {
    open, openPrompt,
    permissionData, findPermissionAsync,
    teamMsg, accTeamDetail,
    doctorTeamsData, searchDoctorTeams,
    organizationsData, findOrganization,
    servicePacksData, findServicePacks,
    signStatesData,
    doctorsData, searchDoctors,
    teamDetail, findTeamDetail,
    servicePacksDetailData, findServicePacksDetail,
  }
}